<template>
  <div class="sub">
     <img src="../../static/my.png" alt="" class="my-btn" @click="goMy">
     <div class="content">
        <h2 class="title">在线预约</h2>
        <van-form validate-first @submit="onSubmit">
          <div class="c-box">
            <div class="select-title">请选择藏品类别</div>
            <!-- <van-checkbox-group v-model="checkboxResult">
              <van-checkbox name="陶器">陶器</van-checkbox>
              <van-checkbox name="玉器">玉器</van-checkbox>
              <van-checkbox name="书画">书画</van-checkbox>
              <van-checkbox name="中国古钱币">中国古钱币</van-checkbox>
              <van-checkbox name="杂项（含金属器）">杂项（含金属器）</van-checkbox>
            </van-checkbox-group> -->
            <van-field name="checkboxGroup" class="check-box" :rules="[{ required: true, message: '请选择藏品分类' }]">
              <template #input>
                <van-checkbox-group v-model="queryInfo.type" direction="vertical">
                  <van-checkbox name="陶器">陶器</van-checkbox>
                  <van-checkbox name="玉器">玉器</van-checkbox>
                  <van-checkbox name="书画">书画</van-checkbox>
                  <van-checkbox name="中国古钱币">中国古钱币</van-checkbox>
                  <van-checkbox name="杂项（含金属器）">杂项（含金属器）</van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
        <div class="vant-form">
            <van-field
              v-model="queryInfo.name"
              name="姓名"
              label="姓名"
              placeholder="请输入姓名"
              :colon="true"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
              v-model="queryInfo.id_number"
              type="number"
              name="身份证号码"
              label="身份证号码"
              :colon="true"
              placeholder="请输入身份证号码"
              :rules="[{ validator:cardValidator,required: true, message: '请输入正确的身份证号' }]"
            />
            <van-field
              v-model="queryInfo.phone"
              type="number"
              name="联系手机"
              label="联系手机"
              placeholder="请输入联系手机"
              :colon="true"
              :rules="[{ validator:phoneValidator,required: true, message: '请输入正确的手机号' }]"
            />
            <van-field
              v-model="queryInfo.address"
              type="textarea"
              :rows="1"
              name="通讯地址"
              label="通讯地址"
              placeholder="请输入通讯地址"
              :colon="true"
              autosize
              :rules="[{ required: true, message: '请输入通讯地址' }]"
            />
          </div>
          <div class="confirm-btn">
            <van-button round type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sub',
  data () {
    return {
      queryInfo: {
        type: [],
        name: '',
        id_number: '',
        phone: '',
        address: '',
        user_id: ''
      }
    }
  },
  methods: {
    cardValidator (val) {
      return /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(val)
    },
    phoneValidator (val) {
      return /^1[3456789]\d{9}$/.test(val)
    },
    async onSubmit () {
      console.log(this.queryInfo)
      this.queryInfo.user_id = localStorage.getItem('userId')
      if (!this.queryInfo.user_id) {
        window.location.href = 'http://www.sxwby.com/home/api/check_auth'
      }
      var qs = require('querystring')
      const info = Object.assign({}, this.queryInfo)
      info.type = info.type.join(',')
      console.log(this.queryInfo, info)
      const { data: res } = await this.$http.post('api/appoint_add', qs.stringify(info))
      console.log(res)
      if (res.code !== 200) {
        return this.$Toast(res.msg)
      }
      this.$Dialog.alert({
        message: '提交成功'
      }).then(() => {
        // on close
        this.$router.push('/')
      })
    },
    goMy () {
      this.$router.push('my')
    }
  }

}
</script>
<style scope>
.sub{padding: 20px 0;background-color: #f5f5f5;}
.select-title{font-size:1em;}
/* .label-width{width:9em;} */
.c-article{text-indent:2em; line-height: 30px;}
.van-checkbox{ height: 45px;line-height: 45px;border-bottom:1px solid #f5f5f5;}
.van-checkbox__icon--checked .van-icon{
      background-color: #761f1c;
    border-color: #761f1c;}
.van-cell {padding: 10px 0; font-size: 0.9em;}
.van-cell::after{left:0;right:0;}
.c-box{background-color: #fff;margin:0 15px;border-radius: 10px;padding:15px 10px;}
.vant-form{background-color: #fff;margin:15px 15px 0;border-radius: 10px;padding:15px 10px;}
.check-box{height: auto;padding:5px 0;border-bottom:0;}
.my-btn{width:30px;height: 30px;position: absolute;right:20px;top:20px;}
</style>
